<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="app">
        <h1>全局组件</h1>
        <navbar></navbar>
        <hr>
        <lqz></lqz>

    </div>

</body>
<script>
    // 定义一个全局组件，在任意组件中都可以使用
    var obj = {
        template: `
          <div>

          <button @click="handleBack">后退</button>
          我是一个组件-->{{ name }}
          <button>前进</button>
          </div>
        `,
        data() {
            return {
                name: 'lqz'
            }
        }, // 重点，data必须是个函数，返回一个对象，组件可以在多个地方重复使用，如果就是对象，导致多个组件共用同一个对象的数据，出现错乱
        methods: {
            handleBack() {
                alert('后退了')
            }
        },
        // 学的所有放在vm对象中的，都可以用
        components: {} // 知道就可以了
    }

    Vue.component('navbar', obj)
    // new Vue({
    //     el: '.app',
    // });




    var vm = new Vue({
    el: '.app',
        data: {
        age: 19
    },
    components: {
        lqz: {
            template: `
                  <div>
                  <h3>我是局部组件</h3>
                  <button>点我看美女</button>
                  </div>`,
                data() {
                return {}
            },
            methods: { }
        }
    }


    })
</script>

</html>